<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基于vue制作计算器</title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
	</head>
	<body>
		<main id="app">
			<div class="card">
				<calculator-inputs :number="number"></calculator-inputs>
				<calculator-buttons>
					<div>
						<div class="card-body d-flex justify-content-between">
							<button v-on:click="clear()" type="button" class="btn btn-outline-secondary">C</button>
							<button type="button" class="btn btn-outline-secondary">+/-</button>
							<button type="button" class="btn btn-outline-secondary">%</button>
							<button v-on:click="symbol('div')" type="button" class="btn btn-outline-secondary">÷</button>
						</div>
						<div class="card-body d-flex justify-content-between">
							<button v-on:click="numberClick('7')" type="button" class="btn btn-outline-secondary">7</button>
							<button v-on:click="numberClick('8')" type="button" class="btn btn-outline-secondary">8</button>
							<button v-on:click="numberClick('9')" type="button" class="btn btn-outline-secondary">9</button>
							<button v-on:click="symbol('mul')" type="button" class="btn btn-outline-secondary">×</button>
						</div>
						<div class="card-body d-flex justify-content-between">
							<button v-on:click="numberClick('4')" type="button" class="btn btn-outline-secondary">4</button>
							<button v-on:click="numberClick('5')" type="button" class="btn btn-outline-secondary">5</button>
							<button v-on:click="numberClick('6')" type="button" class="btn btn-outline-secondary">6</button>
							<button v-on:click="symbol('sub')" type="button" class="btn btn-outline-secondary">-</button>
						</div>
						<div class="card-body d-flex justify-content-between">
							<button v-on:click="numberClick('1')" type="button" class="btn btn-outline-secondary">1</button>
							<button v-on:click="numberClick('2')" type="button" class="btn btn-outline-secondary">2</button>
							<button v-on:click="numberClick('3')" type="button" class="btn btn-outline-secondary">3</button>
							<button v-on:click="symbol('add')" type="button" class="btn btn-outline-secondary">+</button>
						</div>
						<div class="card-body d-flex justify-content-between">
							<button v-on:click="numberClick('0')" type="button" class="btn btn-outline-secondary">0</button>
							<button v-on:click="numberClick('.')" type="button" class="btn btn-outline-secondary">.</button>
							<button v-on:click="comput()" type="button" class="equest btn btn-outline-secondary">=</button>
						</div>
					</div>

				</calculator-buttons>

				<div>
					<video x-webkit-airplay="allow" x5-playsinline="" webkit-playsinline="" playsinline="true" id="cc_2184451A9A4BC2949C33DC5901307461"
					 poster="https://img.bokecc.com/comimage/A3220A8D2701D485/2020-08-30/2184451A9A4BC2949C33DC5901307461-1.jpg" src="blob:http://member.yyd24.com/80973517-0780-426a-9670-9ec60f11f409"
					 crossorigin="anonymous" style="width: 100%; height: 100%; z-index: 100;">
						<source src="https://cd11-ccd1-2.play.bokecc.com/flvs/A3220A8D2701D485/2020-08-30/2184451A9A4BC2949C33DC5901307461-10.m3u8?t=1602673591&amp;key=784E96862377DA0B131DC4EE6BA3D639&amp;tpl=10&amp;tpt=112&amp;custom_id=9f4fef96-dd7f-4a1d-9b42-fbd69afccb14"></video>
				</div>
			</div>

		</main>

		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const inputs =
				`
				<input style="text-align:right" class="show form-control" v-bind:value="number" type="text" readonly="readonly"/>
			`
			const buttons = `
				<div>
					<slot>页面异常</slot>
				</div>
				
			`
			const app = new Vue({
				el: '#app',
				data() {
					return {
						number: 0,
						lastNumber: 0,
						type: '',
					}
				},
				components: {
					'calculator-inputs': {
						template: inputs,
						props: ['number']
					},
					'calculator-buttons': {
						template: buttons
					}
				},
				methods: {
					numberClick(number) {
						if (this.number === 0 || this.number === '0') {
							if (number === '.') {
								this.number += number;
								return;
							}

							this.number = number;
						} else {
							if (number === '.') {
								if (this.number.indexOf('.') != -1) {
									return;
								}
								this.number += number;
								return;
							}
							this.number += number;
						}
					},
					clear() {
						this.number = 0;
						this.lastNumber = 0;
					},
					symbol(type) {
						this.comput();
						this.lastNumber = this.number;
						this.number = 0;
						this.type = type;
					},
					comput() {
						const lastNumber = Number.parseFloat(this.lastNumber);
						this.lastNumber = 0;
						this.number = Number.parseFloat(this.number);
						switch (this.type) {
							case 'add':
								this.number += lastNumber;
								break;
							case 'sub':
								this.number = lastNumber - this.number;
								break;
							case 'mul':
								this.number *= lastNumber;
								break;
							case 'div':
								this.number = lastNumber / this.number;
								break;
							default:
								break;
						}
						this.type = '';
					}
				}
			});
		</script>
	</body>
</html>
